---
type: tutorial
title: Costruiscilo tu stesso - Header
description: >-
  Tutorial: Crea il tuo primo blog Astro —

  Usa tutto ciò che hai imparato finora per costruire un header con navigazione
  responsive
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Dato che il tuo sito sarà visualizzato su diversi dispositivi, è il momento di creare una navigazione di pagina che possa rispondere a più dimensioni dello schermo!

<PreCheck>
  - Crea un Header per il tuo sito che contenga il componente Navigation
  - Rendi il componente Navigation responsive
</PreCheck>


<Box icon="puzzle-piece">

## Prova tu stesso - Costruisci un nuovo componente Header

<Steps>
1. Crea un nuovo componente Header. Importa e usa il tuo componente `Navigation.astro` esistente all'interno di un elemento `<nav>` che si trova all'interno di un elemento `<header>`.

    <details>
    <summary>Mostrami il codice!</summary>

    Crea un file chiamato `Header.astro` in `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>




<Box icon="puzzle-piece">

## Prova tu stesso - Aggiorna le tue pagine

<Steps>
1. Su ogni pagina, sostituisci il tuo componente `<Navigation/>` esistente con il tuo nuovo header.

    <details>
    <summary>Mostrami il codice!</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Pagina iniziale";
    ---
    <html lang="it">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Controlla l'anteprima del tuo browser e verifica che il tuo header sia visualizzato su ogni pagina. Non apparirà ancora diverso, ma se ispezioni la tua anteprima usando gli strumenti per sviluppatori, vedrai che ora hai elementi come `<header>` e `<nav>` attorno ai tuoi link di navigazione.
</Steps>
</Box>

## Aggiungi stili responsive

<Steps>
1. Aggiorna `Navigation.astro` con la classe CSS per controllare i tuoi link di navigazione. Avvolgi i link di navigazione esistenti in un `<div>` con la classe `nav-links`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div class="nav-links">
      <a href="/">Home</a>
      <a href="/about">Su di me</a>
      <a href="/blog">Blog</a>
    </div>
    ```

2. Copia gli stili CSS qui sotto in `global.css`. Questi stili:

    - Stilizzano e posizionano i link di navigazione per mobile
    - Includono una classe `expanded` che può essere attivata/disattivata per visualizzare o nascondere i link su mobile
    - Usano una media query `@media` per definire stili diversi per dimensioni dello schermo più grandi

    :::tip[Design mobile-first]
    Inizia definendo cosa dovrebbe succedere su dimensioni dello schermo piccole per prime! Le dimensioni dello schermo più piccole richiedono layout più semplici. Poi, adatta i tuoi stili per adattarsi a dispositivi più grandi. Se progetti prima il caso complicato, allora devi lavorare per cercare di renderlo di nuovo semplice.
    :::

    ```css title="src/styles/global.css" ins={23-100}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* stili nav */

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

    }
    ```
</Steps>

Ridimensiona la tua finestra e cerca stili diversi applicati a diverse larghezze dello schermo. Il tuo header è ora **responsive** alla dimensione dello schermo attraverso l'uso di media query `@media`.



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Posso usare CSS per aggiungere elementi responsive al mio sito.
</Checklist>
</Box>

### Risorse

- [Design basato su componenti](https://www.droptica.com/blog/component-based-design/) <Badge class="neutral-badge" text="external" />

- [Tag HTML semantici](https://www.dofactory.com/html/semantics) <Badge class="neutral-badge" text="external" />

- [Design mobile-first](https://www.mobileapps.com/blog/mobile-first-design) <Badge class="neutral-badge" text="external" />
